<template>
	<u-popup id="popup-box" :show="params.show" mode="center" bgColor="transparent" :closeOnClickOverlay="params.closeOpacity" @close="cancel">
		<!-- 成功或失败弹窗 -->
		<template v-if="params.type === 1">
			<view class="popup-box">
				<template v-if="params.icon === 1">
					<image class="icon-img" style="width:210rpx;" src="/static/popup/popup_success.png" mode="widthFix"></image>
				</template>
				<template v-else-if="params.icon === 2">
					<image class="icon-img" style="width:120rpx;" src="/static/popup/popup_fail.png" mode="widthFix"></image>
				</template>
				<template v-else-if="params.icon === 3">
					<image class="icon-img" style="width:120rpx;" src="/static/popup/popup_info.png" mode="widthFix"></image>
				</template>
				<view class="title">
					<text>{{params.title}}</text>
				</view>
				<view class="content">
					<text>{{params.content}}</text>
				</view>
				<view class="btn-box" style="margin-top: 30rpx;">
					<template v-if="params.showCancel">
						<button class="btn btn-two" :style="'border:1rpx solid;color:'+primaryColor+';'" @click="cancel">{{params.cancelText}}</button>
						<button class="btn btn-two" :style="'color:#fff;background:'+primaryColor+';'" @click="confirm">{{params.confirmText}}</button>
					</template>
					<template v-else>
						<button class="btn btn-one" @click="confirm">{{params.confirmText}}</button>
					</template>
				</view>
			</view>
		</template>
		<!-- modal弹窗 -->
		<template v-else-if="params.type === 2">
			<view class="modal-box">
				<view class="modal-top">
					<text class="modal-title">{{params.title}}</text>
					<text class="modal-content">{{params.content}}</text>
				</view>
				<view class="modal-btn">
					<template v-if="params.showCancel">
						<view class="item" @click="cancel">{{params.cancelText}}</view>
						<u-line direction="col" color="#eee" />
						<view class="item active" @click="confirm">{{params.confirmText}}</view>
					</template>
					<template v-else>
						<view class="item active" style="width: 500rpx;" @click="confirm">{{params.confirmText}}</view>
					</template>
				</view>
			</view>
		</template>
		<!-- 自定义弹窗 -->
		<template v-else-if="params.type === 3">
			<view class="rich-box">
				<rich-text :nodes="params.content"></rich-text>
			</view>
		</template>
	</u-popup>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				primaryColor: '#1890FF',
				// #ifdef APP-PLUS
				eventChannel:null
				// #endif
			}
		},
		created(){
			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
		},
		methods:{
			cancel(){
				// #ifdef APP-PLUS
				let _this = this;
				uni.navigateBack({
					delta:1,
					success() {
						_this.eventChannel.emit('cancel');
					}
				})
				// #endif
				this.hide()
				
				// #ifndef APP-PLUS
				//执行回调
				this.params.cancel && this.params.cancel(); 
				// #endif

			},
			confirm(){
				// #ifdef APP-PLUS
				let _this = this;
				uni.navigateBack({
					delta:1,
					success() {
						_this.eventChannel.emit('confirm');
					}
				})
				// #endif
				this.hide();
				// #ifndef APP-PLUS
				//执行回调
				this.params.confirm && this.params.confirm(); 
				// #endif
			},
			// 弹窗关闭后需要重置popupConfig数据
			hide(){
				let _this = this;
				// 关闭弹窗
				this.$store.dispatch('updatePopupConfig',{show:false})
				setTimeout(()=>{
					const config = {
						type: 1, 
						showCancel: false, 
						confirmText:'确定', 
						cancelText:'取消', 
						closeOpacity:false,
						title: '', 
						content: '' ,
						icon: 1,
						show: false
					}
					_this.$store.dispatch('updatePopupConfig',config)
				},100)// 这里时间就是弹窗显示隐藏动画时间
			}
		},
		computed: {
			params() {
				return this.$store.getters.popupConfig
			}
		}
	}
</script>

<style>
	page{
		background: transparent;
	}
</style>

<style lang="scss" scoped>

	.popup-box{
		width:420rpx;
		min-height:400rpx;
		display:flex;
		flex-direction: column;
		align-items:center;
		padding: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		.title{
			font-size: 40rpx;
			font-weight:600;
			margin-top: 26rpx;
		}
		.content{
			font-size: 30rpx;
			margin: 20rpx 0;
			text-align: center;
		}
		.btn-box,.btn{
			display: flex;
			justify-content: center;
			align-items:center;
			.btn-one{
				width:300rpx;
				height:76rpx;
				background: $uni-color-primary;
				color:#fff;
				border-radius: 38rpx;
			}
			.btn-two{
				width:206rpx;
				height:76rpx;
				border-radius: 38rpx;
				margin: 0 20rpx;
				background:#fff;
			}
		}
	}
	.modal-box{
		display:flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		.modal-top{
			width:420rpx;
			padding: 40rpx;
			display:flex;
			flex-direction: column;
			align-items:center;
			.modal-title{
				font-size: 36rpx;
				font-weight: bold;
			}
			.modal-content{
				font-size: 30rpx;
				margin-top: 20rpx;
				text-align: center;
				color: #333333;
			}
		}
		.modal-btn{
			border-top: 1rpx solid #eee;
			display: flex;
			.item{
				font-size: 32rpx;
				width: 250rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color:#666666;
				font-weight: 600;
			}
			.active{
				color:$uni-color-primary;
			}
		}
	}
	.rich-box{
		max-width: 750rpx;
		overflow: hidden;
	}
</style>